<template>
  <div class="tabl-list-wrap">
    <view class="tab-list-box">
      <view class="tab-list">
        <view class="tab-item" :class="{active:index===currentTab||(!currentTab&&index===0)}"
          v-for="(item,index) in [..._tabList,...memData]" @click="changeTab(index)">
          <view class="text">{{item.goods_name}}</view>
          <text class="cuIcon-close" @click.stop="onClose(item,index)"
            v-if="index===currentTab||(!currentTab&&index===0)"></text>
        </view>
        <!--        <view class="tab-item" :class="{active:index===currentTab||(!currentTab&&index===0)}"
          v-for="(item,index) in memData" @click="changeMemTab(index)">
          <view class="text">{{item.goods_name}}</view>
          <text class="cuIcon-close" @click.stop="onClose(item,index)"
            v-if="index===currentTab||(!currentTab&&index===0)"></text>
        </view> -->
      </view>
    </view>

    <view class="" v-for="(item,index) in [..._tabList,...memData]">
      <view class="table-content" v-show="index===currentTab||(!currentTab&&index===0)" v-if="type=='inner'">
        <view class="table-row">
          <view class="table-col">
            药用性味
          </view>
          <view class="table-col">
            <text v-if="item.illustration&&item.illustration.indexOf('-')!==-1">
              {{ item.illustration.split('-')[0]}}
            </text>
          </view>
        </view>
        <view class="table-row">
          <view class="table-col">
            主要归经
          </view>
          <view class="table-col">
            <text v-if="item.illustration&&item.illustration.indexOf('-')!==-1">
              {{ item.illustration.split('-')[1]}}
            </text>
          </view>
        </view>
        <view class="table-row">
          <view class="table-col">
            数量
          </view>
          <view class="table-col">
            {{item.amount||''}}
          </view>
        </view>
        <view class="table-row remark">
          <view class="table-col">
            备注资料
          </view>
          <view class="table-col ">
            {{item.remark}}
          </view>
        </view>
      </view>
      <view class="table-content" v-show="index===currentTab||(!currentTab&&index===0)" v-else>
        <view class="table-row">
          <view class="table-col">
            经穴部位
          </view>
          <view class="table-col">
            {{item.illustration}}
          </view>
        </view>
        <view class="table-row">
          <view class="table-col">
            单次时长
          </view>
          <view class="table-col">
            {{item.single_quantity||''}}{{item.single_unit||''}}
          </view>
        </view>
        <view class="table-row">
          <view class="table-col">
            疗程次数
          </view>
          <view class="table-col">
            {{item.amount||''}}
          </view>
        </view>
        <view class="table-row remark">
          <view class="table-col">
            备注资料
          </view>
          <view class="table-col ">
            {{item.remark||''}}
          </view>
        </view>
      </view>

    </view>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        currentTab: 0,
        memData: []
      }
    },
    props: {
      tabList: {
        type: Array
      },
      type: {
        type: String,
        default: 'inner'
      }
    },
    computed: {
      _tabList() {
        if (Array.isArray(this.tabList) && this.tabList.length > 0) {
          return this.tabList.filter(item => {
            // item._del !== true
            if (item._del !== true) {
              if (this.type === 'inner') {
                return item.within_is_true === '是'
              } else {
                return item.within_is_true === '否'
              }
            }
          })
        } else {
          return []
        }
      }
    },
    methods: {
      getData() {
        return [...this.tabList, ...this.memData]
      },
      changeTab(index) {
        this.currentTab = index
      },
      onClose(e, index) {
        let _tabList = this.deepClone(this.tabList)
        if (e.id) {
          _tabList = _tabList.map(item => {
            if (item.id === e.id) {
              item._del = true
            }
            return item
          })
        }else{
          _tabList.splice(index,1)
        }
        
        
        
        if (index > 0) {
          this.currentTab = index - 1
        } else {
          this.currentTab = index
        }
        this.$emit('close', _tabList)
      }
    },
  }
</script>

<style scoped lang="scss">
  .tabl-list-wrap {
    width: 100%;
  }

  .teb-list-box {}

  .tab-list {
    display: flex;
    overflow: hidden;
    padding: 20rpx 0rpx 0;
    overflow-x: scroll;

    .tab-item {
      flex: 1;
      text-align: center;
      height: 34px;
      min-width: 250rpx;
      padding: 20rpx;
      background-color: #F8F8FA;
      border-radius: 8px 8px 0px 0px;
      display: flex;
      font-family: 苹方-简;
      align-items: center;
      justify-content: center;
      position: relative;
      color: #ADAEBB;
      border: 1px solid #F2F1F6;

      .text {
        width: 100%;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }

      &.active {
        color: #0088FE;
        border-color: #E5F3FF;
        background: #E5F3FF;
      }

      .cuIcon-close {
        // position: absolute;
        top: -10rpx;
        right: -10rpx;
        width: 40rpx;
        height: 40rpx;
        text-align: center;
        line-height: 40rpx;
        border-radius: 50%;
        background-color: #a9c3d9;
        color: #fff;
        font-weight: bold;
        z-index: 2;
        font-size: 20rpx;
      }
    }
  }

  .table-content {
    border: 1rpx solid #F2F1F6;
    border-radius: 0 0 20rpx 20rpx;

    .table-row {
      padding: 20rpx;
      border-bottom: 1rpx solid #F2F1F6;
      font-size: 14px;
      font-family: 苹方-简;
      font-weight: normal;
      color: #333333;
      display: flex;
      justify-content: space-between;

      &:last-child {
        border-bottom: none;
      }

      &.remark {
        display: flex;
        flex-direction: column;
        min-height: 150rpx;

        .table-col {
          &:nth-child(2n) {
            padding: 10rpx 0;
            flex: 1;
            text-align: left;
            color: #ADAEBB;
            line-height: 40rpx;
          }
        }
      }

      .table-col {
        &:nth-child(2n) {
          text-align: right;
          color: #0088FE;
        }
      }
    }
  }
</style>
